<template>
    <div class="customButtonStyle">
        <div class="rx-btn-rowButtons"  v-if="styleButton==1">
            {{ getI18Name(btn, 'name') }}
        </div>
        <div class="rx-btn-rowButtons"  v-else-if="styleButton==2">
            <rx-icon-show v-if="btn.btnIcon_name" :icon="btn.btnIcon_name"></rx-icon-show>{{ getI18Name(btn, 'name') }}
        </div>
        <div class="rx-btn-rowButtons"  v-else-if="styleButton==3">
            <a-button size="small" :type="btn.buttonStyle=='danger'?'primary':btn.buttonStyle" :danger="btn.buttonStyle=='danger'?true:false">{{ getI18Name(btn, 'name') }}</a-button>
        </div>
        <div class="rx-btn-rowButtons" v-else-if="styleButton==4">
            <a-button size="small" :type="btn.buttonStyle=='danger'?'primary':btn.buttonStyle" :danger="btn.buttonStyle=='danger'?true:false"><rx-icon-show v-if="btn.btnIcon_name" :icon="btn.btnIcon_name"></rx-icon-show>{{ getI18Name(btn, 'name') }}</a-button>
        </div>
        <div class="rx-btn-rowButtons"  v-else-if="styleButton==5">
            <rx-icon-show v-if="btn.btnIcon_name" :icon="btn.btnIcon_name"></rx-icon-show>
        </div>
        <div class="rx-btn-rowButtons"  v-else-if="styleButton==6">
            <a-button size="small" :type="btn.buttonStyle=='danger'?'primary':btn.buttonStyle" :danger="btn.buttonStyle=='danger'?true:false"><rx-icon-show v-if="btn.btnIcon_name" :icon="btn.btnIcon_name"></rx-icon-show></a-button>
        </div>
    </div>
</template>

<script>
export default {
    name: "customButtonStyle",
    props: {
        customBtnConfig: { type: Object },
        btn:{type:Object}
    },
    data(){
        return{
            styleButton:1,
        }
    },
    created(){
        this.styleButton = JSON.parse(this.customBtnConfig.customBtnJson).styleButton;
    },
    methods:{
        getI18Name(item,text){
            let name = this.$i18(item.i18nJson,'名称解析');
            name=name?name:item[text];
            return name;
        },
    }
}
</script>

<style scoped>
.rx-btn-rowButtons{
    display: flex;
    align-items: center;
    width: 100%;
}
.rx-btn-rowButtons button{
  width: 100%;
}
.rx-btn-rowButtons i{
    margin-right: 2px;
}
</style>
